<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="ZXing for JS">
		<title>ZXing TypeScript | Decoding from camera stream</title>
		<!-- <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null"
			href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
		<link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null"
			href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
		<link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null"
			href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css"> -->
	</head>
	<body>
		<main class="wrapper" style="padding-top:2em">
			<section class="container" id="demo-content">
				<div>
					<a class="button" id="startButton">Start</a>
					<a class="button" id="resetButton">Reset</a>
				</div>
				<div>
					<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
				</div>
				<div id="sourceSelectPanel" style="display:none">
					<label for="sourceSelect">Change video source:</label>
					<select id="sourceSelect" style="max-width:400px">
					</select>
				</div>
				<div style="display: table">
					<label for="decoding-style"> Decoding Style:</label>
					<select id="decoding-style" size="1">
						<option value="once">Decode once</option>
						<option value="continuously">Decode continuously</option>
					</select>
				</div>
				<label>Result:</label>
				<pre><code id="result"></code></pre>
			</section>
		</main>

		<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
		<script type="text/javascript">
			function decodeOnce(codeReader, selectedDeviceId) {
				codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
					console.log(result)
					document.getElementById('result').textContent = result.text
				}).catch((err) => {
					console.error(err)
					document.getElementById('result').textContent = err
				})
			}

			function decodeContinuously(codeReader, selectedDeviceId) {
				codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
					if (result) {
						// properly decoded qr code
						console.log('Found QR code!', result)
						document.getElementById('result').textContent = result.text
					}

					if (err) {
						// As long as this error belongs into one of the following categories
						// the code reader is going to continue as excepted. Any other error
						// will stop the decoding loop.
						//
						// Excepted Exceptions:
						//
						//  - NotFoundException
						//  - ChecksumException
						//  - FormatException

						if (err instanceof ZXing.NotFoundException) {
							console.log('No QR code found.')
						}

						if (err instanceof ZXing.ChecksumException) {
							console.log('A code was found, but it\'s read value was not valid.')
						}

						if (err instanceof ZXing.FormatException) {
							console.log('A code was found, but it was in a invalid format.')
						}
					}
				})
			}

			window.addEventListener('load', function() {
				let selectedDeviceId;
				const codeReader = new ZXing.BrowserQRCodeReader()
				console.log('ZXing code reader initialized')

				codeReader.getVideoInputDevices()
					.then((videoInputDevices) => {
						const sourceSelect = document.getElementById('sourceSelect')
						selectedDeviceId = videoInputDevices[0].deviceId
						if (videoInputDevices.length >= 1) {
							videoInputDevices.forEach((element) => {
								const sourceOption = document.createElement('option')
								sourceOption.text = element.label
								sourceOption.value = element.deviceId
								sourceSelect.appendChild(sourceOption)
							})

							sourceSelect.onchange = () => {
								selectedDeviceId = sourceSelect.value;
							};

							const sourceSelectPanel = document.getElementById('sourceSelectPanel')
							sourceSelectPanel.style.display = 'block'
						}

						document.getElementById('startButton').addEventListener('click', () => {

							const decodingStyle = document.getElementById('decoding-style').value;

							if (decodingStyle == "once") {
								decodeOnce(codeReader, selectedDeviceId);
							} else {
								decodeContinuously(codeReader, selectedDeviceId);
							}

							console.log(`Started decode from camera with id ${selectedDeviceId}`)
						})

						document.getElementById('resetButton').addEventListener('click', () => {
							codeReader.reset()
							document.getElementById('result').textContent = '';
							console.log('Reset.')
						})

					})
					.catch((err) => {
						console.error(err)
					})
			})
		</script>

	</body>

</html>
